<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    .p_btn {
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .p_btn button {
      margin-left: 5px;
    }

    .listBox {
      width: 1300px;
      margin: 0 auto;
      min-height: 340px;
      background: yellow;
      overflow: hidden;
    }

    .listBox ul li {
      float: left;
    }

    .listBox ul li a {
      margin: 0 20px 10px 0;
      display: block;
      width: 218px;
      height: 328px;
      border: 1px dashed #ccc;
    }

    .listBox ul li a img {
      display: block;
      height: 145px;
      width: 218px;
    }

    .listBox ul li a {
      position: relative;
      color: #000;
      text-decoration: none;
    }

    .listBox ul li a .title {
      /* margin: 30px 0 20px 0; */
      font-size: 20px;
      color: #000;
    }


    .listBox ul li a .oldPrice {
      /* margin: 20px 0 20px 0; */
    }

    .listBox ul li a .newPrice span {
      color: #ff0000;
    }

    .ID {
      position: absolute;
      top: -10px;
      left: 0;
    }

    p {
      margin: 5px 0;
    }
  </style>
</head>

<body>
  <h1>根据数据生成一个商品列表</h1>
  <p class="p_btn">
    <button class="priceBtn">根据价格排序</button>
    <button class="salesBtn">根据销量排序</button>
    <button class="assessBtn">根据评价排序</button>
  </p>
  <div class="listBox">
    <!-- <ul>
      <li><a href="###">
          <p class="ID"></p>
          <img class="imgurl" src="./img/honor7.jpg" alt="">
          <p class="title name">iphone7 plugs</p>
          <p class="color">颜色：土豪金</p>
          <p class="oldPrice">原价：5899</p>
          <p class="newPrice">现价：<span>￥5888</span></p>
          <p class="evaluate">评论：</p>
          <p class="sales">销量：</p>
        </a>
      </li>
    </ul> -->
  </div>
  <script>
    //   1、使用forEach或在map方法实现 显示成绩的案例
    // 2、实现商品列表（根据价格，销量，评价排序）

    //第一步：定义数据
    var data = [{
      id: '001',
      name: 'iphone7 plugs',
      imgurl: 'img/ip7.jpg',
      price: 5899.00,
      sale: 5888.00,
      color: '土豪金',
      evaluate: 288,
      sales: 1230
    }, {
      id: '002',
      name: 'Note7',
      imgurl: 'img/note7.jpg',
      price: 3899.00,
      sale: 998.00,
      color: '黑色',
      evaluate: 289,
      sales: 439
    }, {
      id: '003',
      name: '荣耀7',
      imgurl: 'img/honor7.jpg',
      price: 1999.00,
      sale: 1899.00,
      color: '白色',
      evaluate: 438,
      sales: 908
    }, {
      id: '004',
      name: 'iphone7 plugs',
      imgurl: 'img/ip7.jpg',
      price: 5999.00,
      sale: 5808.00,
      color: '土豪金',
      evaluate: 223,
      sales: 986
    }, {
      id: '005',
      name: 'Note7',
      imgurl: 'img/note7.jpg',
      price: 3892.00,
      sale: 998.00,
      color: '黑色',
      evaluate: 88,
      sales: 8798
    }, {
      id: '006',
      name: '荣耀7',
      imgurl: 'img/honor7.jpg',
      price: 1929.00,
      sale: 1099.00,
      color: '白色',
      evaluate: 2088,
      sales: 453
    }, {
      id: '007',
      name: 'iphone7 plugs',
      imgurl: 'img/ip7.jpg',
      price: 4899.00,
      sale: 2888.00,
      color: '土豪金',
      evaluate: 2880,
      sales: 88
    }, {
      id: '008',
      name: 'Note7',
      imgurl: 'img/note7.jpg',
      price: 5876.00,
      sale: 998.00,
      color: '黑色',
      evaluate: 3288,
      sales: 99
    }, {
      id: '009',
      name: '荣耀7',
      imgurl: 'img/honor7.jpg',
      price: 4999.00,
      sale: 1899.00,
      color: '白色',
      evaluate: 1288,
      sales: 645
    }, {
      id: '010',
      name: 'iphone7 plugs',
      imgurl: 'img/ip7.jpg',
      price: 5888.00,
      sale: 2899.00,
      color: '土豪金',
      evaluate: 2288,
      sales: 34
    }, {
      id: '011',
      name: 'Note7',
      imgurl: 'img/note7.jpg',
      price: 3299.00,
      sale: 978.00,
      color: '黑色',
      evaluate: 28,
      sales: 1213
    }, {
      id: '012',
      name: '荣耀7',
      imgurl: 'img/honor7.jpg',
      price: 1976.00,
      sale: 1899.00,
      color: '白色',
      evaluate: 3243,
      sales: 123
    }];

    let priceBtn = document.querySelector(".priceBtn") //价格按钮
    let salesBtn = document.querySelector(".salesBtn") //价格按钮
    let assessBtn = document.querySelector(".assessBtn") //价格按钮
    let listBox = document.querySelector(".listBox");

    dataFun(data) //先调用一个函数，渲染最初的数据

    //第二步：点击根据价格进行排序  值得注意的是：点击按钮之后，需要渲染数据是+=  需要清空之前的渲染页面！
    priceBtn.onclick = function () { //点击的时候，对价格进行排序（大到小），
      listBox.innerHTML = "" //点击根据价格的时候，先清空之前的数据！
      let res1 = data.sort(function (a, b) {
        return b.sale - a.sale;
      })
      dataFun(res1)
    }

    //第二步：点击根据价格进行排序
    salesBtn.onclick = function () { //点击的时候，对价格进行排序（大到小），
      listBox.innerHTML = ""
      let res2 = data.sort(function (a, b) {
        return b.sales - a.sales;
      })
      dataFun(res2)
    }
    //第二步：点击根据销量进行排序
    assessBtn.onclick = function () { //点击的时候，对价格进行排序（大到小），
      listBox.innerHTML = ""
      let res3 = data.sort(function (a, b) {
        return b.evaluate - a.evaluate;
      })
      dataFun(res3)
    }

    //把数据渲染到页面
    function dataFun(dataNum) {
      for (var i = 0; i < data.length; i++) {
        listBox.innerHTML += `
      <ul>
      <li><a href="###">
          <p class="ID">${dataNum[i].id}</p>
          <img class="imgurl" src="${dataNum[i].imgurl}" alt="">
          <p class="title name">${dataNum[i].name}</p>
          <p class="color">颜色：${dataNum[i].color}</p>
          <p class="oldPrice">原价：${dataNum[i].price}</p>
          <p class="newPrice">现价：<span>￥${dataNum[i].sale}</span></p>
          <p class="evaluate">评论：${dataNum[i].evaluate}</p>
          <p class="sales">销量：${dataNum[i].sales}</p>
        </a>
      </li>
    </ul>
      `
      }
    }
  </script>
</body>

</html>